<template>
  <div class="zh-table">
    <testheader :store="store" ref="header"></testheader>
    <testbody  :store="store" ref="body"></testbody>
    <slot></slot>
  </div>
</template>

<style>
  .zh-table-header tr>th{
    padding: 5px 0 5px 0;
    border-bottom: 1px rgba(0,0,0,0.3) solid;
  }
  .zh-table-header{
    margin: auto;
  }

  .zh-table-body {
    margin: auto;
    padding: 5px 0 0 0;
  }

  .zh-table-cell div{
    margin: 3px 0 3px 0;
    overflow: hidden;
  }
</style>
<script>
  import testheader from './src/testheader';
  import testbody from './src/testbody';
  import teststore from './src/teststore';
  import testlayout from './src/testlayout';
  let tableIdSeed = 1;

  export default{

    created() {
      this.tableId = 'el-table_' + tableIdSeed + '_';
    },
    data(){
      let store = new teststore(this, {});
      let layout = new testlayout({});
      return {
        'store':store,
        'layout': layout,
      }
    },
    components: {
      testheader,
      testbody
    },
    props: {
      data: {
        type: Array,
        default: function(){
        		return [];
        },
      },
    },
    watch: {
      data: {
        immediate: true,
        handler(val) {
          this.store.commit('setData', val);
        }
      },
    },
    methods: {}
  }
</script>
